* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent
}
body {
	height:100%;
	font-family: "微软雅黑";
}
li {
	list-style: none;
}

a {
	text-decoration: none;
	color: #fff;
	cursor:pointer;
}
a:hover,body a:active,body a:focus{text-decoration:none;outline:none;}


#card * {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.page {
	position: relative;
	width: 100%;
	height: 486px;
	overflow: hidden;
	background: #FFF;
	font-size: 24px;
}
.elm-box {
	position: absolute;
	height: 100%;
}
.elm {
	word-wrap: break-word;
	color: #404449;
	border-width: 0;
	text-align: left;
	line-height: 1;
	animation-fill-mode: both !important;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	outline: none;
}
.elm.text {
	padding: 7.2px 15px !important;
	/*font-size: 24px;*/
}
.elm.text p {
	margin: 0 !important;
}
.page:not(.swiper-slide-active) .elm {
	animation-duration: 0s !important;
	animation-delay: 0s !important;
	animation-name: unset !important;
}
.elm>img {
	height: 100%;
	width: 100%;
	vertical-align: top !important;
}


#card {
	width: 100%;
	height: 667px;
	overflow: hidden;
	background: #FFF;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(200, 200, 200, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
}
#card-music {
	position: absolute;
	top: 0;
	left: 0;
	width: 35px;
	height: 35px;
	background: rgba(0, 0, 0, 0.2);
	z-index: 9999;
	font-size: 22px;
	color: #FFF;
	margin-left: 15px;
	margin-top: 15px;
	text-align: center;
	line-height: 35px;
	border-radius: 50%;
	cursor: pointer;
}
#card-music.play {
	animation: Music_rotate 1000ms linear infinite;
}
.music-container{position: absolute;top: 35px;right: 5px; z-index: 999;}


@keyframes Music_rotate {
	0% {
		-webkit-transform-origin: center center;
		transform-origin: center center;
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform-origin: center center;
		transform-origin: center center;
		transform: rotate(360deg)
	}
}



#page1 .white-bg{width: 283px;}
#page1 .border,#page1 .border img{width: 299px;}

#page2 .white-bg{width: 283px;}
#page2 .flower-r{left: 302px;}

#page3 .photo{width: 342px;}
#page3 .block{left: 340.5px;}
#page3 .grass{width: 400px;}

#page4 .photo{width: 330px;height: 469px;}
#page4 .bow{top: 519px;}

#page5 .photo{width: 330px;height: 469px;}

#page7 .photo{width: 306px;height: 371px;}
#page7 .white-bg{width: 306px;}
#page7 .xxb{left: 48px;}
#page7 .flower{left: 144px;}
#page7 .ly{left: 173px;}

@media screen and (max-width:320px){
	#card{height: 600px;}
	#page1 .white-bg{width: 263px;}
	#page1 .border,#page1 .border img{width: 270px;}
	
	#page2 .white-bg{width: 263px;}
	#page2 .flower-r{left: 290px;}
	
	#page3 .photo{width: 295px;}
	#page3 .block{left: 290px;}
	#page3 .grass{display:none;}
	
	#page4 .photo{width: 280px;height: 419px;}
	#page4 .bow{display:none;}
	
	#page5 .photo{width: 280px;height: 419px;}
	
	#page7 .photo{width: 266px;height: 371px;}
	#page7 .white-bg{width: 266px;}
}

/*for android-720 weixin*/
@media screen and (min-width:400px){
	#card{height: 736px;}
	#page1 .white-bg{width: 313px;}
	#page1 .border,#page1 .border img{width: 329px;}
	
	#page2 .white-bg{width: 313px;}
	#page2 .flower-r{left: 332px;}
	
	#page3 .photo{width: 375px;}
	#page3 .block{left: 370px;}
	#page3 .grass{display:none;}
	
	#page4 .photo{width: 370px;height: 519px;}
	#page4 .bow{top: 569px;}
	
	#page5 .photo{width: 370px;height: 519px;}
	
	#page7 .photo{width: 350px;height: 420px;}
	#page7 .white-bg{width: 350px;}
	#page7 .flower{left: 164px;}
	#page7 .ly{left: 213px;}

}

@media screen and (min-width:700px){
	#card{height: 1024px;}
	
}